<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios</title>
    <script src="../js/vue.js"></script>
    <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
         <!-- <button @click="loadMovies">加载电影信息</button> -->
          <my-list></my-list>
    </div>
    
    <template id="movite-item">
        <div>
          <span v-text="id"></span>
          <span v-text="name"></span>
        </div>
    </template>

    <template id="movite-list">
        <div>
            <item v-for="m in movieList" :id="m.sid" :name="m.sname">
            </item>
        </div>

    </template>


    <script> 
    
    const item={
            template:'#movite-item'
            ,props:['id','name']
        }

        const list={
            template:'#movite-list'
            ,components:{
                'item':item
            },data(){
                return{
                    movieList:[]
                    ,url:'http://localhost:8080/auth_sys/storage/list' //'http://localhost:8080/movie/movie_json'
                }
            },methods: {
                loadMovies(){
                    // axios.get(this.url,{
                    //     params:{page:1}
                    //     ,headers:{}
                    // }).then(response=>{
                    //     console.log(response.data);
                    //     this.movieList=response.data;

                    // });
                    axios.post(this.url
                                ,{
                                    'sid' :'123'
                                    ,'sname':'aaa'
                                }
                                ,{headers:{}
                                    //{token365:'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI2NmUyYjAxY2I3Njc0MjkzOGQyNTU5NGEzZDRhODUwMSIsInN1YiI6IjEiLCJpc3MiOiJLVEpJQU9ZVSIsImlhdCI6MTcyMTgxMDE0MSwiZXhwIjoxNzI1NDEwMTQxfQ.HzIB-D8eCPlI2axsWiTLyuMtEnSlNTYRTOLyTscNPlI'}
                            }).then(response=>{
                                console.log(response.data);
                                const data = eval("("+response.data.data+")");
                                console.log(data);
                                this.movieList=data;
                    },{responseType:'json'});
                }
            },created() {
                this.loadMovies();
            }
        }


       
        axios.interceptors.request.use(function(config) {
            console.log('--------------------------------请求拦截器触发');
            //设置token
            config.headers.token365 ='eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiI2NmUyYjAxY2I3Njc0MjkzOGQyNTU5NGEzZDRhODUwMSIsInN1YiI6IjEiLCJpc3MiOiJLVEpJQU9ZVSIsImlhdCI6MTcyMTgxMDE0MSwiZXhwIjoxNzI1NDEwMTQxfQ.HzIB-D8eCPlI2axsWiTLyuMtEnSlNTYRTOLyTscNPlI';
            return config;
        });

        axios.interceptors.response.use(function(response) {
            console.log('--------------------------------响应拦截器触发');
            return response;
        },function(error) {
            return Promise.reject(error);
        });

        var app = new Vue({
            el:'#app'
            ,components: {
                'my-list':list
            }
            
        });


    </script>
</body>
</html>